import React from 'react'
import Loadable from 'react-loadable' // 拆分按需加载组件
import LoadingComponent from '../components/loading'

const LoadableHome = Loadable({
    loader: () => import('../pages/home'),
    loading: () => <LoadingComponent />
})
const LoadableRedux = Loadable({
    loader: () => import('../pages/redux'),
    loading: () => <LoadingComponent />
})
const LoadableThunk = Loadable({
    loader: () => import('../pages/thunk'),
    loading: () => <LoadingComponent />
})
const LoadableSaga = Loadable({
    loader: () => import('../pages/saga'),
    loading: () => <LoadingComponent />
})
const LoadableDetail = Loadable({
    loader: () => import('../pages/detail'),
    loading: () => <LoadingComponent />
})

const LoadableAbout = Loadable({
    loader: () => import('../pages/about'),
    loading: () => <LoadingComponent />
})
const LoadableContext = Loadable({
    loader: () => import('../pages/context'),
    loading: () => <LoadingComponent />
})
const LoadableHooks = Loadable({
    loader: () => import('../pages/hooks'),
    loading: () => <LoadingComponent />
})

const routes = [
    { path: '/', component: LoadableHome, exact: true },
    { path: '/redux', component: LoadableRedux, exact: true },
    { path: '/thunk', component: LoadableThunk, exact: true },
    { path: '/thunk', component: LoadableThunk, exact: true },
    { path: '/saga', component: LoadableSaga, exact: true },
    { path: '/detail/:id', component: LoadableDetail, exact: true },
    { path: '/about', component: LoadableAbout, exact: true },
    { path: '/context', component: LoadableContext, exact: true },
    { path: '/hooks', component: LoadableHooks, exact: true }
]

export default routes
